<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10">
      <el-form :model="queryParams" ref="queryRef" class="fnmb" :inline="true">
        <div class="flex jbetween">
          <div>
            <el-form-item label="班级树形">
              <Selector
                category="班级级联"
                cascader="级联"
                v-model="queryParams.Class"
              ></Selector>
            </el-form-item>
            <el-form-item label="课程树形">
              <Selector
                category="课程级联"
                cascader="级联"
                v-model="queryParams.Course"
              ></Selector>
            </el-form-item>
            <el-form-item label="上课结束">
              <el-select
                v-model="queryParams.ShowEnd"
                placeholder="请选择"
                clearable
              >
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="超过下课">
              <el-select
                v-model="queryParams.ShowOld"
                placeholder="请选择"
                clearable
              >
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="flex acenter jend fnw">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div v-if="ClassingList && ClassingList.length" class="notTableM mgb10">
      <div
        style="
          background-color: white;
          padding: 4px 10px;
          border-radius: 10px 10px 0 0;
        "
      >
        正在上的课
      </div>
      <MyTable
        :tableList="ClassingList"
        :columns="columns2"
        :toolbar="false"
        :tabTop="false"
        :btnList="[]"
        :customBtn="[{ name: '结束上课', rule: { key: 'State', status: 1 } }]"
        @custom="handleCustom"
        @link="handleLinkDetail"
      >
      </MyTable>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="[]"
      :customBtn="[
        { name: '开始上课', rule: { key: 'State', status: null } },
        { name: '结束上课', rule: { key: 'State', status: 1 } }
      ]"
      @custom="handleCustom"
      @getList="getList"
      @edit="handleEdit"
      @delete="handleDelete"
      @link="handleLinkDetail"
    >
    </MyTable>
    <MyDialog
      v-model:show="show"
      :title="title"
      :formRef="formRef"
      :width="1000"
      @confirm="handleConfirm"
    >
      <MyTable
        :columns="columns3"
        :tableList="formData.CourseDelivery_Students"
        :toolbar="false"
        :tabTop="false"
      >
      </MyTable>
      <MyTable
        :columns="columns4"
        :tableList="formData.CourseDelivery_Devices"
        :toolbar="false"
      >
        <template v-slot:tabTop>
          <div style="font-size: 16px; font-weight: bold">设备使用情况</div>
        </template>
      </MyTable>
      <el-form
        :model="formData"
        :rules="rules"
        inline
        :label-width="100"
        ref="formRef"
      >
        <el-form-item label="任课老师">
          {{ detailData.Schedule.Name_Teacher }}
        </el-form-item>
        <el-form-item label="最后一堂课">
          <el-radio-group v-model="formData.IsFinally">
            <el-radio :label="0" border>否</el-radio>
            <el-radio :label="1" border>是</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="wid100">
          <el-form-item label="教师自评">
            <el-input
              v-model="formData.CourseDelivery.SelfAsses"
              placeholder="请输入"
              type="textarea"
              clearable
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
    </MyDialog>
    <MyDialog
      v-model:show="showDetail"
      :title="title"
      :width="1100"
      :showFooter="false"
    >
      <el-descriptions title="课程信息" :column="3" border>
        <el-descriptions-item label="编号">{{
          detailData.Schedule.Number
        }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{
          detailData.Schedule.DateDay
        }}</el-descriptions-item>
        <el-descriptions-item label="起止时间">{{
          detailData.Schedule.StartAndEnd
        }}</el-descriptions-item>
        <el-descriptions-item label="班级">{{
          detailData.Schedule.Name_Class
        }}</el-descriptions-item>
        <el-descriptions-item label="场地">{{
          detailData.Schedule.Name_Place
        }}</el-descriptions-item>
        <el-descriptions-item label="课程">{{
          detailData.Schedule.Name_Course
        }}</el-descriptions-item>
        <el-descriptions-item label="教师">{{
          detailData.Schedule.Name_Teacher
        }}</el-descriptions-item>
        <el-descriptions-item label="设备">{{
          detailData.Schedule.Name_Device
        }}</el-descriptions-item>
        <el-descriptions-item label="证书">{{
          detailData.Schedule.Name_Certificate
        }}</el-descriptions-item>
        <el-descriptions-item label="课时">{{
          detailData.Schedule.CourseHour
        }}</el-descriptions-item>
        <el-descriptions-item label="最后一堂课">{{
          detailData.Schedule.IsFinally == 0 ? '否' : '是'
        }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{
          detailData.Schedule.Type == 1 ? '上课' : '考证'
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="实施信息" :column="3" border class="mgt10">
        <el-descriptions-item label="教师自评">{{
          detailData.CourseDelivery.SelfAsses
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag
            effect="dark"
            round
            type=""
            v-show="detailData.CourseDelivery.State == null"
            >未上课</el-tag
          >
          <el-tag
            effect="dark"
            round
            type="success"
            v-show="detailData.CourseDelivery.State == 1"
            >上课中</el-tag
          >
          <el-tag
            effect="dark"
            round
            type="danger"
            v-show="detailData.CourseDelivery.State == 2"
            >上课结束</el-tag
          >
        </el-descriptions-item>
      </el-descriptions>
      <div v-show="detailData.CourseDelivery.State == 2">
        <div
          style="
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #303133;
          "
          class="mgt10"
        >
          学生的打分评价
        </div>
        <MyTable
          :columns="columns5"
          :tableList="detailData.CourseDeliveryStudents"
          :toolbar="false"
          :tabTop="false"
        >
        </MyTable>
        <div
          style="
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #303133;
          "
          class="mgt10"
        >
          设备使用情况
        </div>
        <MyTable
          :columns="columns6"
          :tableList="detailData.CourseDeliveryDevices"
          :toolbar="false"
        ></MyTable>
      </div>
    </MyDialog>
  </div>
</template>

<script setup name="Attendance">
import { ref, getCurrentInstance, onMounted } from 'vue';
import {
  GetAttendanceList_Page,
  GetAttendanceDetail,
  BeginClass,
  EndClass,
  GetHavingClass
} from '@/api/attendance/index.js';

const { proxy } = getCurrentInstance();
const tableList = ref([]);
const Total = ref(0);
const columns = ref([
  { label: '序号' },
  { label: '编号', prop: 'Number', link: true },
  { label: '日期', prop: 'DateDay' },
  { label: '起止时间', prop: 'StartAndEnd' },
  { label: '班级', prop: 'Name_Class' },
  { label: '场地', prop: 'Name_Place' },
  { label: '课程', prop: 'Name_Course' },
  { label: '证书', prop: 'Name_Certificate' },
  // { label: '最后一堂课', prop: 'IsFinallyName' },
  { label: '类型', prop: 'TypeName' },
  { label: '状态', prop: 'StateName', tag: true },
  { label: '操作', width: 160 }
]);
const columns2 = ref([
  { label: '编号', prop: 'Number',link: true  },
  { label: '日期', prop: 'DateDay' },
  { label: '起止时间', prop: 'StartAndEnd' },
  { label: '班级', prop: 'Name_Class' },
  { label: '场地', prop: 'Name_Place' },
  { label: '课程', prop: 'Name_Course' },
  { label: '证书', prop: 'Name_Certificate' },
  // { label: '最后一堂课', prop: 'IsFinallyName' },
  { label: '类型', prop: 'TypeName' },
  { label: '操作', width: 160 }
]);
const columns3 = ref([
  { label: '学生名称', prop: 'Name_Student' },
  { label: '出勤情况', prop: 'IsAttend', select: true, category: '出勤' },
  { label: '态度打分', prop: 'Attitude', rate: true, disabled: false },
  { label: '技能打分', prop: 'Skill', rate: true, disabled: false },
  { label: '习惯打分', prop: 'Habit', rate: true, disabled: false },
  { label: '备注', prop: 'Remark', input: true }
]);
const columns4 = ref([
  { label: '设备名称', prop: 'Name_Device' },
  { label: '设备编号', prop: 'Code_Device' },
  { label: '是否正常使用', prop: 'IsNormal', select: true, category: '正常' },
  { label: '备注', prop: 'Remark', input: true }
]);

const columns5 = ref([
  { label: '学生名称', prop: 'Name_Student' },
  { label: '出勤情况', prop: 'IsAttendName' },
  { label: '态度打分', prop: 'Attitude', rate: true, disabled: true },
  { label: '技能打分', prop: 'Skill', rate: true, disabled: true },
  { label: '习惯打分', prop: 'Habit', rate: true, disabled: true },
  { label: '备注', prop: 'Remark' }
]);

const columns6 = ref([
  { label: '设备名称', prop: 'Name_Device' },
  { label: '设备编号', prop: 'Code_Device' },
  { label: '是否正常使用', prop: 'IsNormalName' },
  { label: '备注', prop: 'Remark' }
]);

proxy.$formatKey(columns.value);
proxy.$formatKey(columns2.value);
proxy.$formatKey(columns3.value);
proxy.$formatKey(columns4.value);
proxy.$formatKey(columns5.value);
proxy.$formatKey(columns6.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10
});
const searchStatus = ref(true);
const queryParams = ref({
  ShowEnd: 'false',
  ShowOld: 'false',
  NoPage: '' //如果传"true"，则返回全部数据不分页
});
const queryRef = ref();
const show = ref(false);
const showDetail = ref(false);
const title = ref();
const formRef = ref();
const ClassingList = ref([]);
const rules = ref({
  Code: [{ required: true, message: '请输入', trigger: 'blur' }],
  Name: [{ required: true, message: '请输入', trigger: 'blur' }],
  Principal: [{ required: true, message: '请选择', trigger: 'change' }]
});
const detailData = ref({});
const formData = ref({});

onMounted(() => {
  getList();
});

async function getList() {
  try {
    let query = {
      ...queryParams.value,
      ...page.value
    };
    let res = await GetAttendanceList_Page(query);
    res.data?.List?.forEach(item => {
      item.DateDay = item.DateDay?.slice(0, 10);
      item.StartAndEnd =
        item.StartTime?.slice(11, 16) + ' -- ' + item.EndTime?.slice(11, 16);
      item.TypeName = item.Type == 1 ? '上课' : '考证';
      item.StateName = [
        {
          name:
            item.State == 1
              ? '上课中'
              : item.State == 2
              ? '上课结束'
              : '未上课',
          type: item.State == 1 ? 'success' : item.State == 2 ? 'danger' : ''
        }
      ];
    });
    tableList.value = res.data.List;
    Total.value = res.data.Total;
    getClassing();
  } catch (error) {
    console.log(error);
  }
}

async function handleConfirm(val) {
  if (val) {
    try {
      await EndClass(formData.value);
      proxy.$modal.msgSuccess('提交成功');
      show.value = false;
      getList();
    } catch (error) {
      console.log(error);
    }
  }
}

async function getClassing() {
  let res = await GetHavingClass();
  ClassingList.value = res.data ? [res.data] : [];
  ClassingList.value?.forEach(item => {
    item.DateDay = item.DateDay?.slice(0, 10);
    item.StartAndEnd =
      item.StartTime?.slice(11, 16) + ' -- ' + item.EndTime?.slice(11, 16);
    item.TypeName = item.Type == 1 ? '上课' : '考证';
  });
}

async function handleCustom(row) {
  switch (row.btnName) {
    case '开始上课':
      await BeginClass({ ID_Schedule: row.ID });
      getList();
      break;
    case '结束上课':
      let res = await GetAttendanceDetail({ ID: row.ID });
      detailData.value = res.data;
      formData.value.IsFinally = res.data.Schedule.IsFinally;
      formData.value.CourseDelivery_Students = res.data.ClassStudents?.map(
        item => {
          return {
            ID_Student: item.ID,
            Name_Student: item.Name,
            IsAttend: '1',
            Attitude: 5,
            Skill: 5,
            Habit: 5
          };
        }
      );
      formData.value.CourseDelivery = {};
      formData.value.CourseDelivery.ID = res.data.CourseDelivery.ID;
      formData.value.CourseDelivery_Devices = res.data?.UseDevices?.map(
        item => {
          return {
            ID_Device: item.ID,
            Code_Device: item.Code,
            Name_Device: item.Name,
            IsNormal: 1
          };
        }
      );
      title.value = '结束上课';
      show.value = true;
      break;
    default:
      break;
  }
}

async function handleLinkDetail(row) {
  try {
    let res = await GetAttendanceDetail({ ID: row.ID });
    detailData.value = res.data;
    if (!detailData.value.CourseDelivery) {
      detailData.value.CourseDelivery = {};
    }
    detailData.value.CourseDeliveryStudents?.forEach(item => {
      item.IsAttend = String(item.IsAttend);
      item.IsAttendName = item.IsAttend == 0 ? '未出勤' : '已出勤';
    });
    detailData.value.CourseDeliveryDevices?.forEach(item => {
      item.IsNormalName = item.IsNormal == 0 ? '不正常' : '正常';
    });
    detailData.value.Schedule.DateDay =
      detailData.value.Schedule.DateDay?.slice(0, 10);
    detailData.value.Schedule.StartAndEnd =
      detailData.value.Schedule?.StartTime?.slice(11, 16) +
      ' -- ' +
      detailData.value.Schedule?.EndTime?.slice(11, 16);
    title.value = '考勤课程详情';
    showDetail.value = true;
  } catch (error) {
    console.log(error);
  }
}

function handleEdit(row) {
  title.value = '修改';
  show.value = true;
}
async function handleDelete(row) {}
function handleAdd() {
  show.value = true;
  title.value = '添加区域';
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    ShowEnd: 'false',
    ShowOld: 'false',
    NoPage: ''
  };
  handleQuery();
}
</script>

<style lang="scss" scoped>
:deep(.notTableM) {
  .el-table {
    .el-table__header {
      margin-bottom: 0;
    }

    .el-table__body {
      border-spacing: 0px;
    }
  }
}
</style>
